<template>
    <div>
        <!-- ref如果绑定在dom节点上，拿到的就是 原生dom节点
ref如果绑定在组件上，拿到的就是 组件对象，可以实现通信功能 -->
        app-<button @click="handleClick()">click</button>
        <input ref="myinput" />      
        <div ref="mydiv">aaaa</div>   
        <!-- 这里只能写ref,不能写成refs -->

        <!-- 再看下面绑定在组件 -->
        <Child ref="mychild"/>

        <Field label="用户名" type="text" ref="username"/>
        <Field label="密码" type="password" ref="password"/>
        <Field label="年龄" type="number" ref="age"/>
      <div>
          <button @click="handleRegister">注册</button>
          <button @click="handleReset">重置</button>
      </div>
    </div>
</template>

<script>
import Child from './Child.vue'
import Field from './Field.vue'
export default {
    components: {
        Child,
        Field
    },
    methods: {
        handleClick() {
            // 获取dom节点
            console.log(this.$refs.myinput.value);
            console.log(this.$refs.mydiv.innerHTML);
            this.$refs.mydiv.style.backgroundColor = 'red';
           console.log(this.$refs.mychild);
           
        },
        handleRegister() {
            console.log(this.$refs.username.myvalue);
            console.log(this.$refs.password.myvalue);
            console.log(this.$refs.age.myvalue);
        },
        handleReset
        () {
            this.$refs.username.myvalue = '';
            this.$refs.password.myvalue = '';
            this.$refs.age.myvalue = '';
        }
    }
}
</script>